<template>
  <div id="commoditySearch">
    <el-container>
      <el-header height="120px">
        <!-- 顶部导航栏上半部分 -->
        <el-row>
          <el-col :span="24" class="top_nav">
            <div class="top_nav_logo">我的淘物</div>
            <div class="search">
              <input
                type="text"
                placeholder=""
                class="search_text"
                v-model="goodsInfo"
              />
              <i class="search_button" @click="getGoodsByInfo">搜索</i>
            </div>
            <div class="shopping_cart">
              <div class="shopping_cart_icon">
                <img src="../../assets/images/购物车.png" alt="" />
              </div>
              <div class="shopping_cart_text" @click="toOrder">我的订单</div>
              <div class="shopping_cart_num">2</div>
            </div>
          </el-col>
        </el-row>
        <!-- 顶部导航栏下半部分 -->
        <el-row>
          <el-col :span="23" class="bottom_nav" offset="1">
            <div class="bottom_nav_first">全部商品分类</div>
            <ul class="bottom_nav_other">
              <li>京东时尚</li>
              <li>美妆馆</li>
              <li>超市</li>
              <li>生鲜</li>
            </ul>
            <ul class="bottom_nav_other">
              <li>京东国际</li>
              <li>闪购</li>
              <li>拍卖</li>
              <li>金融</li>
            </ul>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="23" offset="1">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }"
                >全部结果</el-breadcrumb-item
              >
              <el-breadcrumb-item>二手手机</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <!-- 类型选择 -->
    <el-row
      class="type_selection"
      v-for="(item1, index) in type_selection"
      :key="index"
    >
      <el-col :span="22" class="type_selection_item">
        <div class="type_selection_left">{{ item1.type }}</div>
        <ul class="type_selection_middle">
          <li v-for="(item2, index) in item1.types" :key="index">
            {{ item2.text }}
          </li>
        </ul>
      </el-col>
    </el-row>
    <!-- 商品展示 -->
    <el-row>
      <el-col :span="20" offset="2" class="cmmodity_display">
        <div
          class="cmmodity_display_item"
          v-for="(item, index) in cmmodity_display_temp"
          :key="index"
        >
          <center>
            <img
              :src="item.goodsImg"
              alt=""
              class="cmmodity_display_img"
              @click="goGoodsDetail(item.gid)"
            />
          </center>
          <div class="price">￥{{ item.goodsPrice }}</div>
          <div class="title">
            {{ item.goodsName }}
          </div>
          <!-- <div class="evaluation">
            <span class="evaluation_num">{{ item.evaluation }}</span>
            条评价
          </div> -->
          <div class="store">{{ item.shopName }}</div>
          <div class="button">
            <button
              class="button_left"
              v-if="isLike"
              @click="collect(item.gid)"
            >
              收藏
            </button>
            <button class="button_left" v-else @click="cancelCollect(item.gid)">
              已收藏
            </button>
            <div class="button_right" @click="addOrders(item.gid)">
              <img
                src="../../assets/images/购物车.png"
                alt=""
                width="15px"
                height="15px"
              />
              加入订单
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <center>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="cmmodity_display.length"
        >
        </el-pagination>
      </div>
    </center>
  </div>
</template>

<script>
import {
  getGoodsListAPI,
  getGoodsByInfoAPI,
  collectAPI,
  cancelCollectAPI,
  addOrderAPI,
} from "@/api";
export default {
  name: "commoditySearch",
  // data() {
  //   return {
  //     uid: parseInt(sessionStorage.getItem("uid")),
  //   };
  // },
  mounted() {
    // this.init();
    this.getGoodsList();
  },
  methods: {
    // init() {
    //   this.cmmodity_display_temp = this.cmmodity_display.slice(
    //     (this.currentPage - 1) * this.pageSize,
    //     this.currentPage * this.pageSize
    //   );
    // },
    handleSizeChange(val) {
      this.pageSize = val;
      this.cmmodity_display_temp = this.cmmodity_display.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.cmmodity_display_temp = this.cmmodity_display.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    async getGoodsList() {
      const getGoodsListRes = await getGoodsListAPI();
      this.cmmodity_display = getGoodsListRes.data.data;
      this.cmmodity_display_temp = this.cmmodity_display.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    async getGoodsByInfo() {
      if (this.goodsInfo != "") {
        const getGoodsByInfoRes = await getGoodsByInfoAPI(this.goodsInfo);
        this.cmmodity_display = getGoodsByInfoRes.data.data;
        this.handleCurrentChange(1);
      } else {
        this.getGoodsList();
      }
    },
    goGoodsDetail(gid) {
      this.$router.push({
        path: "/goodsDetail/" + gid,
      });
    },
    async collect(gid) {
      const uid = parseInt(sessionStorage.getItem("uid"));
      const collectRes = await collectAPI(uid, gid);
      console.log(gid);
      if (collectRes.data.statusCode === 200) {
        this.$notify({
          title: "收藏成功",
          message: collectRes.data.message,
          type: "success",
        });
        this.isLike = false;
      }
    },
    async cancelCollect(gid) {
      const uid = parseInt(sessionStorage.getItem("uid"));
      const cancelCollectRes = await cancelCollectAPI(uid, gid);
      if (cancelCollectRes.data.statusCode === 200) {
        this.$notify({
          title: "取消收藏成功",
          message: cancelCollectRes.data.message,
          type: "success",
        });
        this.isLike = true;
      }
    },
    async addOrders(gid) {
      // console.log(gid);
      this.addOrder.gid = gid;
      const res = await addOrderAPI(this.addOrder);
      // console.log(res);
      if (res.data.statusCode === 200) {
        this.$notify({
          title: "添加订单成功",
          message: res.data.message,
          type: "success",
        });
      }
      // console.log(gid);
    },
    toOrder(){
      this.$router.push('/myOrder')
    }
  },
  data() {
    return {
      addOrder: {
        orderDate: "2022-06-29 14:17:02",
        orderStatus: "已下单",
        uid: parseInt(sessionStorage.getItem("uid")),
        gid: 0,
      },
      addOrderForm: {
        goodsImg: "",
        goodsPrice: "",
        goodsName: "",
        shopName: "",
      },
      isLike: true,
      gid: parseInt(this.$route.params.gid),
      goodsInfo: "",
      currentPage: 1,
      pageSize: 10,
      type_selection: [
        {
          type: "品牌",
          types: [
            {
              text: "Apple",
            },
            {
              text: "华为",
            },
            {
              text: "OPPO",
            },
            {
              text: "vivo",
            },
            {
              text: "小米",
            },
            {
              text: "荣耀",
            },
            {
              text: "三星",
            },
            {
              text: "真我",
            },
            {
              text: "魅族",
            },
            {
              text: "iQOO",
            },
            {
              text: "黑鲨",
            },
            {
              text: "红米",
            },
            {
              text: "锤子",
            },
            {
              text: "索尼",
            },
            {
              text: "摩托罗拉",
            },
            {
              text: "联想",
            },
          ],
        },
        {
          type: "机身内存",
          types: [
            {
              text: "1TB",
            },
            {
              text: "640GB",
            },
            {
              text: "8GB以下",
            },
            {
              text: "16GB",
            },
            {
              text: "32GB",
            },
            {
              text: "64GB",
            },
            {
              text: "128GB",
            },
            {
              text: "256GB",
            },
            {
              text: "512GB",
            },
          ],
        },
        {
          type: "运行内存",
          types: [
            {
              text: "18GB",
            },
            {
              text: "16GB",
            },
            {
              text: "12GB",
            },
            {
              text: "8GB",
            },
            {
              text: "6GB",
            },
            {
              text: "4GB",
            },
            {
              text: "3GB",
            },
            {
              text: "2GB",
            },
            {
              text: "2GB以下",
            },
          ],
        },
        {
          type: "屏幕尺寸",
          types: [
            {
              text: "6.95英寸及以上",
            },
            {
              text: "6.0-6.24英寸",
            },
            {
              text: "6.85-6.94英寸",
            },
            {
              text: "6.75-6.84英寸",
            },
            {
              text: "6.65-6.74英寸",
            },
            {
              text: "6.55-6.64英寸",
            },
          ],
        },
        {
          type: "成色",
          types: [
            {
              text: "99新",
            },
            {
              text: "95新",
            },
            {
              text: "9成新",
            },
            {
              text: "8成新",
            },
            {
              text: "准新品",
            },
            {
              text: "全新未拆封",
            },
          ],
        },
      ],
      cmmodity_display: [],
      cmmodity_display_temp: [],
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  /* background-color: rgb(240, 243, 239); */
  background-color: #fff;
}
#commoditySearch {
  /* background-color: rgb(240, 243, 239); */
  background-color: #fff;
}
/* 顶部导航栏 */
.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-bottom: 2px solid #f30213;
}
.top_nav {
  height: 87px;
}
#commoditySearch .top_nav_logo {
  height: 87px;
  width: 13%;
  float: left;
  line-height: 87px;
  font-weight: 700;
  font-size: 20px;
  margin-left: 8px;
}
#commoditySearch .search {
  height: 87px;
  width: 50%;
  float: left;
  margin-left: 10%;
  position: relative;
}
#commoditySearch .search_text {
  float: left;
  height: 24px;
  line-height: 24px;
  color: #666;
  padding: 4px;
  margin-bottom: 4px;
  border-width: 2px 0 2px 2px;
  border-style: solid;
  outline: 0;
  font-size: 14px;
  width: 70%;
  border-color: #df3028;
  font-family: "microsoft yahei";
  margin-top: 20px;
}
#commoditySearch .search_button {
  top: 20px;
  left: 70%;
  width: 8%;
  height: 36px;
  display: block;
  overflow: hidden;
  font-style: normal;
  background-color: #df3028;
  font-size: 14px;
  float: left;
  border: none;
  border-radius: 0;
  line-height: 1;
  color: #fff;
  font-family: "Microsoft YaHei";
  /* font-size: 16px; */
  cursor: pointer;
  line-height: 36px;
  position: absolute;
}
#commoditySearch .shopping_cart {
  height: 36px;
  width: 10%;
  float: right;
  margin-right: 7%;
}
#commoditySearch .shopping_cart_icon {
  margin-left: -100px;
}
#commoditySearch .shopping_cart_text {
  line-height: 36px;
  bottom: 0px;
}
#commoditySearch .shopping_cart_num {
  bottom: 8px;
  right: 10px;
}
.bottom_nav {
  height: 33px;
  line-height: 33px;
}
.bottom_nav_first {
  height: 33px;
  background: #f30213;
  color: #fff;
  padding: 0 25px;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  display: block;
  float: left;
}
.bottom_nav_other {
  display: block;
  float: left;
  list-style-type: none;
  border-right: 1px rgb(192, 192, 192, 0.2) solid;
}
.bottom_nav_other li {
  height: 33px;
  padding: 0 22px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  line-height: 33px;
  color: #333;
  font-weight: 700;
  display: block;
  float: left;
}
.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  line-height: 160px;
}
.type_selection {
  margin-left: 82px;
  /* background-color: red; */
}
.type_selection_item {
  /* background-color: red; */
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
  border-bottom: 0.5px;
  background: #f3f3f3;
}
.type_selection_left {
  float: left;
  width: 8%;
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  line-height: 24px;
  /* border-bottom: 1px solid #ddd; */
  background: #f3f3f3;
  color: #666;
  font-size: 12px;
}
.type_selection_middle {
  width: 91%;
  display: block;
  float: right;
  background-color: #fff;
}
.type_selection_middle li {
  width: 90px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  zoom: 1;
  color: #005aa0;
  text-decoration: none;
  margin-right: 40px;
  margin-left: 10px;
  margin-bottom: 4px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  float: left;
  /* border-bottom: 1px solid #ddd; */
  /* background: #f3f3f3; */
}
.cmmodity_display {
  width: 100%;
}
.cmmodity_display_item {
  float: left;
  height: 400px;
  width: 240px;
  margin-right: 50px;
  margin-top: 10px;
}
.cmmodity_display_img {
  width: 220px;
  height: 220px;
}
.price {
  font-size: 20px;
  line-height: 30px;
  color: #df3028;
}
.title {
  margin-top: 5px;
  font-size: 13px;
  height: 34px;
  overflow: hidden;
}
.evaluation {
  font-size: 13px;
  margin-top: 6px;
  color: #666;
}
.evaluation_num {
  color: #005aa0;
  font-size: 13px;
  font-weight: 700;
}
.store {
  margin-top: 6px;
  color: #666;
  font-size: 13px;
}

.button_left {
  margin-top: 7px;
  width: 49%;
  border: #ddd 1px solid;
  display: inline-block;
  text-align: center;
  font-size: 13px;
  line-height: 20px;
  height: 20px;
}

.button_right {
  margin-top: 7px;
  width: 49%;
  border: #ddd 1px solid;
  text-align: center;
  display: inline-block;
  font-size: 13px;
  color: #df3028;
  height: 20px;
  line-height: 20px;
}
</style>